<template>
  <div class="container">
     <van-search 
      :value="value"
      shape="round"
      @search="search"
      @clear="clear"
      placeholder="输入姓名、账号" />
      <div class="findNav">
          <van-row>
            <van-col span="6" v-for="(item,index) in findNav" :key="index" @click="selNav(index)"><span :class="currentindex==index?'active':''">{{item.name}}</span></van-col>  
          </van-row>
      </div>
      <div class="weui-cell findlist">
          <div class="weui-cell__hd">
              <avatar></avatar>
          </div>
          <div class="weui-cell__bd">
              <div class="nickname">大白牙</div>
              <div class="address">距离322km</div>
          </div>
          <div class="weui-cell__ft"><Follow isfollowed="0"></Follow></div>
      </div>
  </div>

</template>

<script>
import Follow from "@/components/follow";
import avatar from "@/components/avatar";
import {find} from "@/api/find";
export default {
  components: {
      Follow,
      avatar
  },

  data () {
    return {
      value:" ",
      findNav:[
        {name:"全部",id:"1"},
        {name:"会员",id:"2"},
        {name:"老师",id:"3"},
        {name:"机构",id:"4"},
      ],
      currentindex:0,
    }
  },
  methods:{
     toInfo(e){
        
     },
     addphone(){
       console.log(1)
       wx.addPhoneContact({
          firstName: '大牙',//联系人姓名
          mobilePhoneNumber: "13734210705",//联系人手机号
          success:function(){

          },
          fail:function(){

          }
       })
     },
     search(e){
         console.log(e)
         let keywords=e.mp.detail;
         if(keywords&&keywords.length!=0){
             console.log(this.value)
             this.value=""
         }
     },
     selNav(index){
        this.currentindex=index;

     },
     clear(){
       console.log(this.value)
     }
  },
  onLoad(options){
    Object.assign(this.$data, this.$options.data())
    this.value=options.keyword
  },
  created () {
    
  }
}
</script>
<style>
</style>
<style lang="scss">
    .findNav{
      width:375px;
      height:40px;
      background:rgba(255,255,255,1);
      box-shadow:0px 2px 5px 0px rgba(0, 0, 0, 0.07);
      text-align:center;
      font-size:14px;
      font-weight:500;
      line-height:40px;
      color:rgba(51,51,51,1);
      margin-bottom:15px;
      .active{
        color:rgba(70,183,255,1);
      }
    }
    .iconList{
        font-size:12px;
        font-weight:500;
        color:rgba(51,51,51,1);
        text-align:center;
        padding:15px 0;
        img{
          width:34px;
          height:34px;
          display:block;
          margin: 0 auto;
          margin-bottom:13px;
        }
        .phoneIcon{
          width:33px;
        }
        .weIcon{
          width:40px;
          height:33px;
        }
    }

    .findlist{
      padding:15px;
      .Avatar{
        width:55px;
        height:55px;
        .avatar{
          width:55px;
          height:55px;
        }
      }
      .nickname{
        font-size:14px;
        font-weight:500;
        color:rgba(51,51,51,1);
      }
      .address{
        font-size:12px;
        font-weight:500;
        color:#E9B55E;
        line-height:1;
        padding-top:11px;
        .icon{
            width:14px;
            height:18px;
            margin-right:3px;
            vertical-align:middle;
        }
      }
      &::after{
        position:absolute;
        left:68px;
        right:18px;
        bottom:0;
        border-bottom:1px solid #ddd;
        content:"";
      }
    }
</style>
